<template>
  <div>
    <el-card>
      <header>
        <el-row :gutter="10">
          <el-col :span="5">
            <span>用户状态：</span>
            <el-switch v-model="info.status"
                       @change="statusChange"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
            <span>{{info.status|statusText}}</span>
          </el-col>
          <el-col :offset="10"
                  :span="5">
            <el-button type="warning"
                       @click="restPassword">重置密码</el-button>
            <el-button type="danger"
                       @click="delAdmin(id)">删除账号</el-button>
          </el-col>
        </el-row>
        <hr class="hr">
      </header>
      <Form :id="id"
            :info="info"
            :menu="menu" />
    </el-card>
  </div>
</template>
<script>
import {
  getAccessById,
  getAdminById,
  delAdminById,
  updateAdminStatus,
  restPassword
} from "@/api/admin";
import Form from "./form";
export default {
  components: {
    Form
  },
  data() {
    return {
      menu: [],
      info: {
        id: 0,
        account: "",
        name: "",
        status: false,
        createTime: ""
      }
    };
  },
  async created() {
    this.getAdmin(this.id);
    this.getAccess(this.id);
  },
  methods: {
    async getAdmin(id) {
      const data = await getAdminById(id);
      data.status = data.status === 0 ? true : false;
      this.info = data;
    },
    async getAccess(id) {
      const data = await getAccessById(id);
      this.menu = data;
    },
    async delAdmin(id) {
      await delAdminById(id);
      this.$message({
        type: "success",
        message: "删除成功",
        center: true
      });
      this.$router.push("/admin/table");
    },
    async statusChange(enableStatus) {
      const payload = {
        ids: this.info.id,
        enableStatus
      };
      await updateAdminStatus(payload);
      this.$message({
        type: "success",
        message: "更改状态成功",
        center: true
      });
    },
    async restPassword() {
      await restPassword(this.id);
      this.$message({
        type: "success",
        message: "重置密码成功",
        center: true
      });
    }
  },
  filters: {
    statusText(status) {
      return status ? "正常" : "禁用";
    }
  },
  computed: {
    id() {
      return this.$route.query.id;
    }
  }
};
</script>
<style lang="scss" scoped>
.hr {
  border: 0.5px dashed #8d8c8c;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>


